<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- Copyright (c) 2008, Stefan Henze
	All rights reserved.
	
	Redistribution and use in source and binary forms, with or without modification, are not permitted.
	I'll make up some project including a redistributable License later on.
	
	
	Based to some little extent on iUI:
	  Copyright (c) 2007, iUI Project Members
	
	-->
	<title>iWAT sample page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<style type="text/css" media="screen">@import "../../iwat/iwat.css";</style>
	
	<script type="text/javascript" language="javascript" src="../../iwat/iwat.js"></script>
</head> 

<body onorientationchange="updateOrientation()" class="container custom"><!-- showiphoneycontrols -->

	<div id="swipecontainer"></div>
	<span class="toolbar" id="toolbar">
		<h1 id="pageTitle"></h1>
		<a id="homeButton" class="button" href="#home" onclick="history.back();">home</a>
	</span>

	<ul id="home" title="iWAT" backtitle="Back" selected="true" class="linklist small">
		<li><a href="#largelist">
			<span>
				<span class="title">Large link list</span>
			</span>
		</a></li>
		<li><a href="#smalllist">
			<span>
				<span class="title">Small link list</span>
			</span>
		</a></li>
		<li><a href="#settings1">
			<span>
				<span class="title">Settings with Arranger</span>
			</span>
		</a></li>
		<li><a href="#settings2">
			<span>
				<span class="title">More Settings Demo</span>
			</span>
		</a></li>
		<li><a href="#panel1">
			<span>
				<span class="title">Panel Demo</span>
			</span>
		</a></li>
		<li><a href="#slider">
			<span>
				<span class="title">NEW: Slider Navigation</span>
			</span>
		</a></li>
	</ul>
	
	<div id="settings1" class="panel" title="Settings" parentName="home">
		<a class="button rightbutton" href="#set_settings1" widget="dialog" cmd="show">Settings</a>
		<h1>Click on "Settings" to enter the settings page.</h1>
	</div>

	<form class="dialog" id="set_settings1" action="index.html">
		<div class="toolbarhint">
			arrange and select your items
		</div>
		<div class="toolbar">
			<h1>Items</h1>
			<a class="button leftbutton" href="#" widget="dialog" cmd="cancel">Cancel</a>
			<a class="button rightbutton" href="#" widget="dialog" cmd="submit">Save</a>
		</div>
		<div class="arranger">
			<div class="aec first" isFirst="true"><div class="ae">
				<span>Item 1 (no icon)</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec"><div class="ae">
				<span><img src="sport.png"/>Item 2</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec"><div class="ae">
				<span><img src="sport.png"/>Item 3</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec"><div class="ae">
				<span><img src="sport.png"/>Another Item</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec"><div class="ae">
				<span><img src="sport.png"/>One more Item</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec"><div class="ae">
				<span><img src="sport.png"/>Item 6</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec last" isLast="true"><div class="ae">
				<span><img src="sport.png"/>Still an Item</span>
				<a href="#" class="hide" widget="arranger" cmd="hide"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>

			<div class="aec" hidden="true"><div class="ae">
				<span><img src="sport.png"/>Inactive Item 1</span>
				<a href="#" class="show" widget="arranger" cmd="show"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>
			<div class="aec" hidden="true"><div class="ae">
				<span><img src="sport.png"/>Inactive Item 2</span>
				<a href="#" class="show" widget="arranger" cmd="show"></a>
				<a href="#" class="up" widget="arranger" cmd="up"></a>
				<a href="#" class="down" widget="arranger" cmd="down"></a>
			</div></div>

		</div>
	</form>


	<ul id="largelist" title="Large List" parentName="home" class="linklist large">
		<li><a href="#none" class="subtitle"><span class="label">List element</span>
			<span>
				<span class="title">List Element</span>
				<span class="subtitle">with subtitle</span>
			</span>
		</a></li>
		<li><a href="#none"><span class="label">List element</span>
			<span>
				<span class="title">List Element</span>
			</span>
		</a></li>
		<li><a href="#none"><span class="label">List element with icon</span>
			<img src="sport.png"/>
			<span>
				<span class="title">List Element with Icon</span>
			</span>
		</a></li>
		<li><a href="#none" class="subtitle"><span class="label">List element icon</span>
			<img src="sport.png"/>
			<span>
				<span class="title">List Element with Icon</span>
				<span class="subtitle">with subtitle</span>
			</span>
		</a></li>
	</ul>

	<ul id="smalllist" title="Small List" parentName="home" class="linklist small">
		<li><a href="#none">
			<span>
				<span class="title">Item</span>
			</span>
		</a></li>
		<li><a href="#none" class="subtitle">
			<span>
				<span class="title">Item</span>
				<span class="subtitle">with subtitle</span>
			</span>
		</a></li>
		<li><a href="#none">
			<img src="sport.png"/>
			<span>
				<span class="title">Item with Icon</span>
			</span>
		</a></li>
		<li><a href="#none" class="subtitle">
			<img src="sport.png"/>
			<span>
				<span class="title">Item with Icon</span>
				<span class="subtitle">with subtitle</span>
			</span>
		</a></li>
	</ul>

	<div id="settings2" class="panel" title="Settings" parentName="home">
		<a class="button rightbutton" href="#set_settings2" widget="dialog" cmd="show">Settings</a>
		<h1>Click on "Settings" to enter the settings page.</h1>
	</div>

	<form class="dialog" id="set_settings2" action="index.html#settings2" title="Search">
		<div class="toolbarhint">
			This demonstrates special settings
		</div>
		<div class="toolbar">
			<h1>Settings</h1>
			<a class="button leftbutton" href="#" widget="dialog" cmd="cancel">Cancel</a>
			<a class="button rightbutton" href="#" widget="dialog" cmd="submit">Save</a>
		</div>
		<div class="content">
			<h1>This is a form</h1>
			<fieldset>
				<label>input</label>
				<input type="text" name="input1" class="first" onfocus="dialogdemo_inputfocus(this, event)" onblur="dialogdemo_inputblur(this, event)"/>
				<label>input</label>
				<input type="text" name="inptu2" onfocus="dialogdemo_inputfocus(this, event)" onblur="dialogdemo_inputblur(this, event)"/>
				<table class="radio">
					<tr>
						<td class="selected">Option 2</td>
						<td>Option 2</td>
						<td>Third option</td>
					</tr>
				</table>
				<a class="formbutton last" href="#" onclick="dialogdemo_search()" id="dialogdemo_searchbutton">Link / Button</a>
			</fieldset>
			<h1 id="dialogdemo_searching" style="display:none">searching ...</h1>
			<h1 id="dialogdemo_res1" style="display:none">Search result</h1>
			<fieldset id="dialogdemo_res2" style="display:none">
				<a class="formbutton first" href="#">Found item 1</a>
				<a class="formbutton last" href="#">Found item 2</a>
			</fieldset>
			<h1>Arrange or delete items</h1>
			<fieldset><!-- TODO: Hier haben wir unterhalb des Arranger eine doppelte Border -->
				<div class="arranger first last">
					<div class="aec first" isFirst="true"><div class="ae">
						<span>Item 1</span>
						<a href="#" class="del" widget="arranger" cmd="del"></a>
						<a href="#" class="up" widget="arranger" cmd="up"></a>
						<a href="#" class="down" widget="arranger" cmd="down"></a>
						<a href="#" class="delconfirm" widget="arranger" cmd="delconfirm">Delete</a>
					</div></div>
					<div class="aec"><div class="ae">
						<span>Second item</span>
						<a href="#" class="del" widget="arranger" cmd="del"></a>
						<a href="#" class="up" widget="arranger" cmd="up"></a>
						<a href="#" class="down" widget="arranger" cmd="down"></a>
						<a href="#" class="delconfirm" widget="arranger" cmd="delconfirm">Delete</a>
					</div></div>
					<div class="aec last" isLast="true"><div class="ae">
						<span>Last item</span>
						<a href="#" class="del" widget="arranger" cmd="del"></a>
						<a href="#" class="up" widget="arranger" cmd="up"></a>
						<a href="#" class="down" widget="arranger" cmd="down"></a>
						<a href="#" class="delconfirm" widget="arranger" cmd="delconfirm">Delete</a>
					</div></div>
				</div>
			</fieldset>
		</div>
	</form>

	<div id="panel1" class="panel" title="Panel Demo" parentName="home">

		<h1>This is a panel</h1>
		<ul>
			<li>This is one item</li>
			<li>You can have tables here:</li>
			<li>
				<table class="tabtitle">
					<tr>
						<td rowspan="3">This is the first row</td>
						<td>Row 1, col2</td>
					</tr>
					<tr><td>Second row</td></tr>
					<tr><td>Third row</td></tr>
				</table>
			</li>
			<li class="last"><a href="#">Some Link here</a></li>
		</ul>

		<h1>Another list</h1>
		<ul>
			<li>More than one list here</li>
			<li class="last">last item</li>
		</ul>

	</div>
	
	<div id="slider" class="slider container" title="Slider" parentName="home">
		<table>
			<tr>
				<td class="left"><a href="#" widget="slider" cmd="left"></a></td>
				<td class="text">First page</td>
				<td class="right"><a href="#"  widget="slider" cmd="right"></a></td>
			</tr>
		</table>

		<div id="slider1" class="slideitem" selected="true" title="First page" orderno="0" class="slideitem">
			<div class="panel">
				<h1>This is a panel</h1>
				<ul>
					<li>This is one item</li>
					<li>You can have tables here:</li>
					<li>
						<table class="tabtitle">
							<tr>
								<td rowspan="3">This is the first row</td>
								<td>Row 1, col2</td>
							</tr>
							<tr><td>Second row</td></tr>
							<tr><td>Third row</td></tr>
						</table>
					</li>
					<li class="last"><a href="#">Some Link here</a></li>
				</ul>
		
				<h1>Another list</h1>
				<ul>
					<li>More than one list here</li>
					<li class="last">last item</li>
				</ul>
			</div>
		</div>
		<div id="slider2" class="slideitem" title="Second page" orderno="1" class="slideitem">
			<div class="panel">
				<h1>Some other panel</h1>
				<ul>
					<li>A panel item</li>
					<li>An another one</li>
					<li class="last"><a href="#">Some Link here</a></li>
				</ul>
		
				<h1>Could be arbitrary content though</h1>

			</div>
		</div>
		<div id="slider3" class="slideitem" title="Last page" orderno="1" class="slideitem">
			<div class="panel">
				<h1>A panel again</h1>
				<ul>
					<li class="last">Just one more</li>
				</ul>
		
				<h1>Could be arbitrary content though</h1>

			</div>
		</div>		
		<script type="text/javascript">
			iwat.widgetSlider.initUsage("slider");
		</script>
	</div>

	<div id="none" class="panel" title="Nothing here" parentName="home">
		<h1>This page does not exist :-)</h1>
	</div>

	<script type="text/javascript">
		var dialogdemo_savedonsubmit;
		var dialogdemo_inputel;
		
		function dialogdemo_inputfocus(el, event) {
			dialogdemo_savedonsubmit = el.form.onsubmit;
			dialogdemo_inputel = el;
			el.form.onsubmit = function(event) {
				event.preventDefault();
				dialogdemo_search();
				if (dialogdemo_inputel) {
					dialogdemo_inputel.blur();
					document.getElementById("dialogdemo_searchbutton").focus();
				}
			};
		}
		
		function dialogdemo_inputblur(el, event) {
			el.form.onsubmit = dialogdemo_savedonsubmit;
		}
		
		function dialogdemo_search() {
			document.getElementById("dialogdemo_searching").removeAttribute("style");
			window.setTimeout(dialogdemo_search_done, 2000);
		}
		function dialogdemo_search_done() {
			document.getElementById("dialogdemo_searching").style.display = "none";
			document.getElementById("dialogdemo_res1").removeAttribute("style");
			document.getElementById("dialogdemo_res2").removeAttribute("style");
		}
		
	</script>
  </body>
</html>
